<template>
  <div class="pd-15">
    <div class="pd-bottom-15">
      <a-button type="primary" @click="showImageEditor">显示</a-button>
    </div>
    <img :src="state.imgs" v-if="state.imgs" />
    <tui-image-editor
      :visible="state.visible"
      ref="imageEditor"
      @funUploadBase64="funUploadBase64"
    />
  </div>
</template>

<script lang="ts" setup>
import TuiImageEditor from "@/components/tuiImageEditor.vue";
import { nextTick, onMounted, getCurrentInstance, reactive } from "vue";

const { proxy }: any = getCurrentInstance();

const state: any = reactive({
  visible: false,
  imgs: "",
});
/**
 * 更新最新图片信息
 * @param datas
 */
const funUploadBase64 = (datas: any) => {
  state.visible = false;
  if (datas) {
    state.imgs = datas;
  }
};
const showImageEditor = () => {
  state.visible = true;
  if (proxy.$refs.imageEditor != undefined) {
    proxy.$refs.imageEditor.initData({
      urls: require("@/assets/image/login/userbg1.png"),
    });
  }
};
</script>
